<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>年度销售报告</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="report">
    <h1>2025 年度销售报告</h1>
    <p>以下数据展示了公司年度销售趋势和产品明细。</p>

    <section>
      <h2>销售趋势图</h2>
      <canvas id="salesChart" width="800" height="400"></canvas>
    </section>

    <section>
      <h2>产品销售明细</h2>
      <table>
        <thead>
          <tr>
            <th>产品</th>
            <th>季度</th>
            <th>销量</th>
            <th>销售额</th>
          </tr>
        </thead>
        <tbody id="table-body"></tbody>
      </table>
    </section>
  </div>

  <script>
    // Chart.js 图表
    const ctx = document.getElementById('salesChart');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
          label: '销售额 (万元)',
          data: [120, 150, 180, 200],
          borderWidth: 2
        }]
      },
      options: { responsive: false }
    });

    // 填充表格
    const tbody = document.getElementById('table-body');
    for (let i = 1; i <= 80; i++) {
      tbody.innerHTML += `
        <tr>
          <td>产品 ${i}</td>
          <td>Q${(i % 4) + 1}</td>
          <td>${Math.floor(Math.random() * 1000)}</td>
          <td>${(Math.random() * 100).toFixed(2)} 万元</td>
        </tr>`;
    }
  </script>
</body>
</html>
